<template>
  <template v-if="user">
  <van-cell title="我的昵称">
    <van-highlight :keywords="user.username" :source-string="user.username" id="userInfoShow"/>
  </van-cell>
  <van-cell title="我的头像">
    <img style="height: 80px;border-radius: 50%" :src="user.avatarUrl" v-if="user.avatarUrl"/>
    <img style="height: 80px;border-radius: 50%" src="../assets/cuteXiaBa.jpg" v-if="!user.avatarUrl"/>
  </van-cell>
  <van-cell title="个性签名" v-if="user.profile">
    <van-text-ellipsis :content="user.profile"
                       rows="1"
                       expand-text="展开"
                       collapse-text="收起"
                       id="userProfile"/>
  </van-cell>
    <van-highlight v-if="user?.tags" :keywords="keywordsTags" :source-string="textTags" id="keywordsTagsFontSize" @click="toUpdateTagsPage"/>
    <van-highlight v-if="!user?.tags" :keywords="keywordsTagsTwo" :source-string="textTagsTwo" id="keywordsTagsFontSize" @click="toInitTagsPage"/>
  <van-tag round type="primary"
           size="medium"
           v-for="tag in user?.tags"
           v-if="user?.tags"
           style="margin-top: 10px;
           margin-bottom: 4px;
           margin-left: 16px">
    {{ tag }}
  </van-tag>
  <van-divider/>
  <van-cell title="修改我的信息" is-link to="/user/update" value="修改"/>
  <van-cell title="我领导的队伍" is-link to="/user/team/lead" value="查看"/>
  <van-cell title="我加入的队伍" is-link to="/user/team/join" value="查看"/>
  <van-cell title="退出登录" @click="preUserLogout" id="logoutText"/>
</template>
  <van-dialog v-model:show="showLogoutDialog"
              confirmButtonColor="#EE0A24"
              show-cancel-button
              @confirm="userLogout">
    <van-divider>
      <van-highlight :keywords="keywordsLogout" :source-string="textLogout" id="keywordsLogoutFontSize"/>
    </van-divider>
  </van-dialog>
</template>


<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../services/user.ts";
import {useRouter} from "vue-router";
import myAxios from "../plugins/myAxios.ts";
import {showFailToast, showSuccessToast} from "vant";

// const user = {
//   id: 1,
//   username: '树脂鼠鼠果酱',
//   userAccount: 'Guo Jianghui',
//   avatarUrl: 'src/assets/cuteYuPi.png',
//   gender: '男',
//   phone: '13865837908',
//   email: '1258981151@qq.com',
//   planetCode: '1',
//   createTime: new Date(),
// }
const router = useRouter();
const showLogoutDialog = ref(false);
const user = ref();

// 高亮文本
const textTags = '点击更新我的标签';
const textTagsTwo = '还没有标签？点击这里！';
const keywordsTags = '点击更新我的标签';
const keywordsTagsTwo = '还没有标签？点击这里！';
const textLogout = '请确认登出'
const keywordsLogout = '请确认登出'

onMounted(async () => {
  user.value = await getCurrentUser();
  user.value.tags = JSON.parse(user.value.tags);
  console.log(user.value.profile);
  if(!user.value) {
    router.push({
      path: '/user/login',
    })
  }
})

const preUserLogout = () => {
  showLogoutDialog.value = true;
}

const userLogout = async () => {
  const res = await myAxios.post('/user/logout');
  if(res.code === 0) {
    showSuccessToast('退出登录成功');
    router.push({
      path: '/user/login',
      replace: true,
    })
  } else {
    showFailToast('退出登录失败 系统错误');
  }
}

/**
 * 跳转初始标签页
 */
const toInitTagsPage = () => {
  router.push('/user/init/tag');
}

/**
 * 跳转更新标签页
 */
const toUpdateTagsPage = () => {
  router.push('/user/update/tag');
}

</script>


<style scoped>
#keywordsLogoutFontSize {
  font-size: 20px;
}
#keywordsTagsFontSize {
  font-size: 17px;
  text-align: center;
  line-height: 33px;
  opacity: 90%;
}
#logoutText {
  --van-cell-text-color: #EE0A25;
  text-align: center;
  font-size: 18px;
  margin-top: 5px;
  opacity: 70%;
}
#userInfoShow {
  font-size: 14px;
  --van-highlight-tag-color: #1a1a1a;
  opacity: 80%;
}
#userProfile {
  font-size: 14px;
  color: #1a1a1a;
  opacity: 80%;
}
</style>